<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>设备信息管理</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <style>
        .container {
            padding: 20px;
        }
        .header-operations {
            margin-bottom: 20px;
        }
        .search-bar {
            margin-bottom: 20px;
        }
        .el-tabs {
            background: #fff;
            padding: 20px;
            border-radius: 4px;
        }
        .upload-demo {
            margin-bottom: 20px;
        }
        .sensor-card {
            margin-bottom: 15px;
            border-radius: 4px;
        }
        .sensor-value {
            font-size: 24px;
            color: #409EFF;
            margin: 10px 0;
        }
        .control-panel {
            margin-top: 10px;
            padding-top: 10px;
            border-top: 1px solid #EBEEF5;
        }
        .el-dropdown-menu i {
            margin-right: 5px;
        }
        .el-dropdown-menu__item {
            padding: 8px 20px;
        }
        .el-button [class*="el-icon-"] + span {
            margin-left: 5px;
        }
        .sensor-factor {
            margin-bottom: 10px;
            font-size: 14px;
        }
        .factor-name {
            color: #606266;
        }
        .factor-value {
            font-size: 18px;
            color: #409EFF;
            margin: 0 5px;
        }
        .factor-unit {
            color: #909399;
            font-size: 12px;
        }
        .sensor-card {
            margin-bottom: 20px;
        }
        .sensor-card .el-card__header {
            padding: 10px 15px;
        }
        .config-info-card {
            margin-bottom: 20px;
        }
        .sensor-list-card {
            margin-bottom: 20px;
        }
        .sensor-card {
            margin-bottom: 20px;
            transition: all 0.3s;
        }
        .sensor-card:hover {
            transform: translateY(-5px);
        }
        .sensor-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
        }
        .sensor-name {
            font-size: 16px;
            font-weight: 500;
            color: #303133;
        }
        .sensor-content {
            padding: 10px 0;
        }
        .sensor-factor {
            display: flex;
            align-items: center;
            margin-bottom: 12px;
        }
        .factor-name {
            flex: 1;
            color: #606266;
        }
        .factor-value {
            font-size: 20px;
            color: #409EFF;
            margin: 0 8px;
            font-weight: 500;
        }
        .factor-unit {
            color: #909399;
            font-size: 12px;
        }
        .control-panel {
            margin-top: 15px;
        }
        .control-content {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 5px 0;
        }
        .control-label {
            color: #606266;
        }
        .sensor-search-section {
            border: 1px solid #EBEEF5;
            border-radius: 4px;
            padding: 15px;
            background-color: #FAFAFA;
        }
        .pagination-container {
            margin-top: 15px;
            text-align: right;
        }
        .control-row {
            display: flex;
            align-items: center;
            margin-bottom: 10px;
        }
        .control-row:last-child {
            margin-bottom: 0;
        }
        .control-label {
            width: 80px;
            color: #606266;
        }
        .unit-label {
            margin-left: 5px;
            color: #909399;
            font-size: 12px;
        }
        .control-buttons {
            margin-top: 10px;
            display: flex;
            gap: 10px;
        }
        .el-alert {
            margin: 5px 0;
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="container">
            <!-- 搜索栏 -->
            <div class="search-bar">
                <el-form :inline="true" :model="searchForm">
                    <el-form-item label="园区">
                        <el-select v-model="searchForm.park" placeholder="请选择园区" @change="handleParkChange">
                            <el-option v-for="park in parks" :key="park.id" :label="park.name" :value="park.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="分区">
                        <el-select v-model="searchForm.zone" placeholder="请选择分区" @change="handleZoneChange">
                            <el-option v-for="zone in zones" :key="zone.id" :label="zone.name" :value="zone.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="机房">
                        <el-select v-model="searchForm.room" placeholder="请选择机房">
                            <el-option v-for="room in rooms" :key="room.id" :label="room.name" :value="room.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="设备类型">
                        <el-select v-model="searchForm.deviceType" placeholder="请选择设备类型">
                            <el-option v-for="type in deviceTypes" :key="type.id" :label="type.name" :value="type.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="handleSearch">查询</el-button>
                        <el-button @click="resetSearch">重置</el-button>
                        <el-button type="primary" @click="handleAdd">新增设备</el-button>
                    </el-form-item>
                </el-form>
            </div>

            <!-- 主要内容区 -->
            <el-tabs v-model="activeTab">
                <!-- 设备基本信息 -->
                <el-tab-pane label="设备基本信息" name="basic">
                    <el-table :data="deviceList" style="width: 100%">
                        <el-table-column prop="code" label="设备编号" width="120"></el-table-column>
                        <el-table-column prop="name" label="设备名称" width="150"></el-table-column>
                        <el-table-column prop="type" label="设备类型" width="120"></el-table-column>
                        <el-table-column prop="location" label="安装位置" width="200"></el-table-column>
                        <el-table-column prop="status" label="设备状态" width="100">
                            <template slot-scope="scope">
                                <el-tag :type="scope.row.status === '正常' ? 'success' : 'danger'">
                                    {{scope.row.status}}
                                </el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作" width="280" fixed="right">
                            <template slot-scope="scope">
                                <el-button type="text" size="small" @click="handleEdit(scope.row)">
                                    <i class="el-icon-edit"></i> 编辑
                                </el-button>
                                <el-button type="text" size="small" @click="viewDetails(scope.row)">
                                    <i class="el-icon-view"></i> 查看
                                </el-button>
                                <el-button type="text" size="small" @click="handleDelete(scope.row)">
                                    <i class="el-icon-delete"></i> 删除
                                </el-button>
                                <el-dropdown @command="handleCommand($event, scope.row)" trigger="click">
                                    <el-button type="text" size="small">
                                        <i class="el-icon-more"></i> 更多
                                    </el-button>
                                    <el-dropdown-menu slot="dropdown">
                                        <el-dropdown-item command="maintenance">
                                            <i class="el-icon-time"></i> 维保记录
                                        </el-dropdown-item>
                                        <el-dropdown-item command="fault">
                                            <i class="el-icon-warning"></i> 故障记录
                                        </el-dropdown-item>
                                        <el-dropdown-item command="document">
                                            <i class="el-icon-document"></i> 文档管理
                                        </el-dropdown-item>
                                        <el-dropdown-item command="config">
                                            <i class="el-icon-connection"></i> 组态关联
                                        </el-dropdown-item>
                                    </el-dropdown-menu>
                                </el-dropdown>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-tab-pane>

                <!-- 维保记录 -->
                <el-tab-pane label="维保记录" name="maintenance">
                    <el-table :data="maintenanceRecords" style="width: 100%">
                        <el-table-column prop="date" label="维保日期" width="200"></el-table-column>
                        <el-table-column prop="type" label="维保类型" width="120"></el-table-column>
                        <el-table-column prop="person" label="维保人员" width="120"></el-table-column>
                        <el-table-column prop="content" label="维保内容"></el-table-column>
                        <el-table-column prop="result" label="维保结果" width="100">
                            <template slot-scope="scope">
                                <el-tag :type="scope.row.result === '正常' ? 'success' : 'warning'">
                                    {{scope.row.result}}
                                </el-tag>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-tab-pane>

                <!-- 故障记录 -->
                <el-tab-pane label="故障记录" name="fault">
                    <el-table :data="faultRecords" style="width: 100%">
                        <el-table-column prop="date" label="故障发生时间" width="150"></el-table-column>
                        <el-table-column prop="info" label="设备名称" width="120"></el-table-column>
                        <el-table-column prop="name" label="故障处理人" width="120"></el-table-column>
                        <el-table-column prop="description" label="故障描述"></el-table-column>
                        <el-table-column prop="date" label="故障解除时间" width="150"></el-table-column>
                        <el-table-column prop="status" label="处理结果" width="100">
                            <template slot-scope="scope">
                                <el-tag :type="scope.row.status === '已处理' ? 'success' : 'danger'">
                                    {{scope.row.status}}
                                </el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column prop="fixmethod" label="故障处理方法"></el-table-column>
                    </el-table>
                </el-tab-pane>

                <!-- 文档管理 -->
                <el-tab-pane label="文档管理" name="document">
                    <el-tabs v-model="docActiveTab">
                        <el-tab-pane label="产品说明书" name="manual">
                            <el-upload
                                class="upload-demo"
                                action="https://api.example.com/upload"
                                :on-preview="handlePreview"
                                :on-remove="handleRemove"
                                :file-list="manualList">
                                <el-button size="small" type="primary">上传说明书</el-button>
                            </el-upload>
                        </el-tab-pane>
                        <el-tab-pane label="维修手册" name="repair">
                            <el-upload
                                class="upload-demo"
                                action="https://api.example.com/upload"
                                :on-preview="handlePreview"
                                :on-remove="handleRemove"
                                :file-list="repairManualList">
                                <el-button size="small" type="primary">上传维修手册</el-button>
                            </el-upload>
                        </el-tab-pane>
                        <el-tab-pane label="操作规程" name="operation">
                            <el-upload
                                class="upload-demo"
                                action="https://api.example.com/upload"
                                :on-preview="handlePreview"
                                :on-remove="handleRemove"
                                :file-list="operationManualList">
                                <el-button size="small" type="primary">上传操作规程</el-button>
                            </el-upload>
                        </el-tab-pane>
                    </el-tabs>
                </el-tab-pane>

                <!-- 组态关联数据 -->
                <el-tab-pane label="组态关联数据" name="config">
                    <div v-if="!configForm.systemType">
                        <el-empty description="暂未绑定组态信息">
                            <el-button type="primary" @click="handleBindConfig(currentDevice)">绑定组态</el-button>
                        </el-empty>
                    </div>
                    <div v-else>
                        <el-card class="config-info-card">
                            <div slot="header">
                                <span>组态基本信息</span>
                                <el-button 
                                    style="float: right; padding: 3px 0" 
                                    type="text"
                                    @click="handleBindConfig(currentDevice)">
                                    修改绑定
                                </el-button>
                            </div>
                            <el-descriptions :column="3" border>
                                <el-descriptions-item label="系统类型">{{getSystemTypeName(configForm.systemType)}}</el-descriptions-item>
                                <el-descriptions-item label="设备名称">{{configForm.deviceName}}</el-descriptions-item>
                                <el-descriptions-item label="绑定状态">
                                    <el-tag size="small" type="success">已绑定</el-tag>
                                </el-descriptions-item>
                            </el-descriptions>
                        </el-card>

                        <el-card class="sensor-list-card">
                            <div slot="header">
                                <span>传感器数据</span>
                                <el-button 
                                    style="float: right; padding: 3px 0" 
                                    type="text"
                                    @click="refreshSensorData">
                                    <i class="el-icon-refresh"></i> 刷新数据
                                </el-button>
                            </div>
                            <el-row :gutter="20">
                                <el-col :span="8" v-for="sensor in selectedSensorList" :key="sensor.id">
                                    <el-card class="sensor-card" :shadow="'hover'" :body-style="{ padding: '15px' }">
                                        <div class="sensor-header">
                                            <span class="sensor-name">{{sensor.name}}</span>
                                            <el-tag size="mini" :type="sensor.status === '正常' ? 'success' : 'danger'">
                                                {{sensor.status}}
                                            </el-tag>
                                        </div>
                                        <div class="sensor-content">
                                            <div v-for="factor in sensor.factors" :key="factor.name" class="sensor-factor">
                                                <span class="factor-name">{{factor.name}}</span>
                                                <span class="factor-value">{{factor.value}}</span>
                                                <span class="factor-unit">{{factor.unit}}</span>
                                            </div>
                                        </div>
                                        <div class="control-panel">
                                            <el-divider content-position="left">操作控制</el-divider>
                                            <div class="control-content" v-if="sensor.controllable">
                                                <div class="control-row">
                                                    <span class="control-label">运行状态</span>
                                                    <el-switch
                                                        v-model="sensor.controlStatus"
                                                        active-text="开启"
                                                        inactive-text="关闭"
                                                        @change="handleSensorControl(sensor)">
                                                    </el-switch>
                                                </div>
                                                <div class="control-row" v-if="sensor.hasSetPoint">
                                                    <span class="control-label">设定值</span>
                                                    <el-input-number 
                                                        v-model="sensor.setPoint" 
                                                        :min="sensor.setPointMin"
                                                        :max="sensor.setPointMax"
                                                        :step="sensor.setPointStep"
                                                        size="small"
                                                        @change="handleSetPointChange(sensor)">
                                                    </el-input-number>
                                                    <span class="unit-label">{{sensor.setPointUnit}}</span>
                                                </div>
                                                <div class="control-buttons">
                                                    <el-button 
                                                        type="primary" 
                                                        size="small" 
                                                        @click="handleSensorOperation(sensor, 'reset')"
                                                        :disabled="!sensor.canReset">
                                                        重置
                                                    </el-button>
                                                    <el-button 
                                                        type="warning" 
                                                        size="small" 
                                                        @click="handleSensorOperation(sensor, 'calibrate')"
                                                        :disabled="!sensor.canCalibrate">
                                                        校准
                                                    </el-button>
                                                </div>
                                            </div>
                                            <div class="control-content" v-else>
                                                <el-alert
                                                    title="该传感器不支持操作控制"
                                                    type="info"
                                                    :closable="false"
                                                    show-icon>
                                                </el-alert>
                                            </div>
                                        </div>
                                    </el-card>
                                </el-col>
                            </el-row>
                        </el-card>
                    </div>
                </el-tab-pane>
            </el-tabs>

            <!-- 设备编辑对话框 -->
            <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="800px">
                <el-form :model="deviceForm" :rules="rules" ref="deviceForm" label-width="120px" size="small">
                    <!-- 基础信息部分 -->
                    <el-divider content-position="left">基础信息</el-divider>
                    <el-row :gutter="20">
                        <el-col :span="12">
                            <el-form-item label="设备编号" prop="code">
                                <el-input v-model="deviceForm.code" placeholder="请输入设备编号"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="设备名称" prop="name">
                                <el-input v-model="deviceForm.name" placeholder="请输入设备名称"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <!-- 位置信息部分 -->
                    <el-divider content-position="left">位置信息</el-divider>
                    <el-row :gutter="20">
                        <el-col :span="8">
                            <el-form-item label="所属园区" prop="parkId">
                                <el-select v-model="deviceForm.parkId" placeholder="请选择园区" @change="handleParkSelect">
                                    <el-option v-for="park in parks" :key="park.id" :label="park.name" :value="park.id">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="所属分区" prop="zoneId">
                                <el-select v-model="deviceForm.zoneId" placeholder="请选择分区" @change="handleZoneSelect">
                                    <el-option v-for="zone in zonesOptions" :key="zone.id" :label="zone.name" :value="zone.id">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="所属机房" prop="roomId">
                                <el-select v-model="deviceForm.roomId" placeholder="请选择机房">
                                    <el-option v-for="room in roomsOptions" :key="room.id" :label="room.name" :value="room.id">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <!-- 设备类型信息部分 -->
                    <el-divider content-position="left">设备类型信息</el-divider>
                    <el-row>
                        <el-col :span="24">
                            <el-form-item label="设备类型" prop="typeId">
                                <el-select v-model="deviceForm.typeId" placeholder="请选择设备类型" @change="handleDeviceTypeSelect">
                                    <el-option v-for="type in deviceTypes" :key="type.id" :label="type.name" :value="type.id">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <!-- 动态参数信息部分 -->
                    <template v-if="deviceForm.typeId && currentTypeFields.length > 0">
                        <el-divider content-position="left">设备参数信息</el-divider>
                        <el-row :gutter="20">
                            <el-col :span="12" v-for="field in currentTypeFields" :key="field.name">
                                <el-form-item 
                                    :label="field.name" 
                                    :prop="'params.' + field.name"
                                    :rules="[
                                        { required: field.required, message: '请输入' + field.name, trigger: 'blur' }
                                    ]">
                                    <!-- 根据字段类型显示不同的输入控件 -->
                                    <el-input 
                                        v-if="field.type === 'text'"
                                        v-model="deviceForm.params[field.name]"
                                        :placeholder="'请输入' + field.name">
                                    </el-input>
                                    <el-input-number 
                                        v-if="field.type === 'number'"
                                        v-model="deviceForm.params[field.name]"
                                        :placeholder="'请输入' + field.name">
                                    </el-input-number>
                                    <el-date-picker
                                        v-if="field.type === 'date'"
                                        v-model="deviceForm.params[field.name]"
                                        type="date"
                                        :placeholder="'请选择' + field.name">
                                    </el-date-picker>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </template>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="saveDevice('deviceForm')">确 定</el-button>
                </div>
            </el-dialog>

            <!-- 设备详情对话框 -->
            <el-dialog title="设备详情" :visible.sync="detailDialogVisible" width="700px">
                <el-descriptions :column="2" border>
                    <el-descriptions-item label="设备编号">{{currentDevice?.code}}</el-descriptions-item>
                    <el-descriptions-item label="设备名称">{{currentDevice?.name}}</el-descriptions-item>
                    <el-descriptions-item label="设备类型">{{currentDevice?.type}}</el-descriptions-item>
                    <el-descriptions-item label="设备状态">
                        <el-tag :type="currentDevice?.status === '正常' ? 'success' : 'danger'">
                            {{currentDevice?.status}}
                        </el-tag>
                    </el-descriptions-item>
                    <el-descriptions-item label="所属园区">{{currentDevice?.parkName}}</el-descriptions-item>
                    <el-descriptions-item label="所属分区">{{currentDevice?.zoneName}}</el-descriptions-item>
                    <el-descriptions-item label="所属机房">{{currentDevice?.roomName}}</el-descriptions-item>
                    <el-descriptions-item label="安装位置">{{currentDevice?.location}}</el-descriptions-item>
                </el-descriptions>

                <el-divider content-position="left">设备参数信息</el-divider>
                <el-descriptions :column="2" border>
                    <el-descriptions-item 
                        v-for="(value, key) in currentDevice?.params" 
                        :key="key" 
                        :label="key">
                        {{value}}
                    </el-descriptions-item>
                </el-descriptions>

                <div slot="footer" class="dialog-footer">
                    <el-button type="primary" @click="detailDialogVisible = false">关闭</el-button>
                </div>
            </el-dialog>

            <!-- 绑定组态信息的对话框 -->
            <el-dialog title="绑定组态信息" :visible.sync="configDialogVisible" width="800px">
                <el-form :model="configForm" label-width="120px" size="small">
                    <!-- 组态系统选择 -->
                    <el-form-item label="组态系统类型" required>
                        <el-select 
                            v-model="configForm.systemType" 
                            placeholder="请选择系统类型"
                            @change="handleSystemTypeChange">
                            <el-option 
                                v-for="type in systemTypes" 
                                :key="type.id" 
                                :label="type.name" 
                                :value="type.id">
                            </el-option>
                        </el-select>
                    </el-form-item>

                    <!-- 组态设备选择 -->
                    <el-form-item label="组态设备名称" required>
                        <el-select 
                            v-model="configForm.deviceName"
                            placeholder="请选择组态设备"
                            :disabled="!configForm.systemType">
                            <el-option 
                                v-for="device in configDevices" 
                                :key="device.id" 
                                :label="device.name" 
                                :value="device.id">
                                <span style="float: left">{{ device.name }}</span>
                                <span style="float: right; color: #8492a6; font-size: 13px">
                                    {{ device.code }}
                                </span>
                            </el-option>
                        </el-select>
                    </el-form-item>

                    <!-- 传感器搜索和列表 -->
                    <el-form-item label="关联传感器" required>
                        <div class="sensor-search-section">
                            <el-form :inline="true" :model="sensorSearchForm" size="small">
                                <el-form-item label="传感器名称">
                                    <el-input 
                                        v-model="sensorSearchForm.name" 
                                        placeholder="请输入传感器名称">
                                    </el-input>
                                </el-form-item>
                                <el-form-item label="传感器类型">
                                    <el-select 
                                        v-model="sensorSearchForm.type" 
                                        placeholder="请选择类型">
                                        <el-option label="温度传感器" value="temperature"></el-option>
                                        <el-option label="湿度传感器" value="humidity"></el-option>
                                        <el-option label="压力传感器" value="pressure"></el-option>
                                        <el-option label="控制器" value="controller"></el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item>
                                    <el-button type="primary" @click="searchSensors">查询</el-button>
                                    <el-button @click="resetSensorSearch">重置</el-button>
                                </el-form-item>
                            </el-form>

                            <!-- 传感器选择表格 -->
                            <el-table
                                :data="availableSensors"
                                style="width: 100%"
                                height="300"
                                @selection-change="handleSensorSelectionChange">
                                <el-table-column type="selection" width="55"></el-table-column>
                                <el-table-column prop="code" label="传感器编号" width="120"></el-table-column>
                                <el-table-column prop="name" label="传感器名称" width="150"></el-table-column>
                                <el-table-column prop="type" label="类型" width="120"></el-table-column>
                                <el-table-column prop="location" label="安装位置"></el-table-column>
                                <el-table-column prop="status" label="状态" width="80">
                                    <template slot-scope="scope">
                                        <el-tag :type="scope.row.status === '正常' ? 'success' : 'danger'" size="small">
                                            {{scope.row.status}}
                                        </el-tag>
                                    </template>
                                </el-table-column>
                            </el-table>

                            <div class="pagination-container">
                                <el-pagination
                                    @size-change="handleSizeChange"
                                    @current-change="handleCurrentChange"
                                    :current-page="sensorSearchForm.page"
                                    :page-sizes="[10, 20, 50]"
                                    :page-size="sensorSearchForm.pageSize"
                                    layout="total, sizes, prev, pager, next"
                                    :total="totalSensors">
                                </el-pagination>
                            </div>
                        </div>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="configDialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="saveConfigBinding">确 定</el-button>
                </div>
            </el-dialog>
        </div>
    </div>

    <script src="https://unpkg.com/vue@2.6.14/dist/vue.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script>
        new Vue({
            el: '#app',
            data() {
                return {
                    activeTab: 'basic',
                    docActiveTab: 'manual',
                    searchForm: {
                        park: '',
                        zone: '',
                        room: '',
                        deviceType: ''
                    },
                    deviceList: [
                        {
                            id: 1,
                            code: 'KT-001',
                            name: '中央空调-01',
                            type: '空调设备',
                            location: 'A区办公楼-1F-机房1',
                            status: '正常',
                            parkName: '智慧园区A区',
                            zoneName: 'A区办公楼',
                            roomName: '1F-机房1',
                            params: {
                                '生产厂家': '格力电器',
                                '设备型号': 'GMV-N450W/A',
                                '生产日期': '2023-06-15',
                                '安装厂家': '格力专业店',
                                '安装日期': '2023-07-20',
                                '维保单位': '格力售后服务中心'
                            }
                        },
                        {
                            id: 2,
                            code: 'DT-001',
                            name: '客梯-01',
                            type: '电梯设备',
                            location: 'A区商业街-1号楼',
                            status: '正常',
                            parkName: '智慧园区A区',
                            zoneName: 'A区商业街',
                            roomName: '1号楼电梯间',
                            params: {
                                '生产厂家': '通力电梯',
                                '设备型号': 'MX-2000',
                                '额定载重': '1000kg',
                                '安装单位': '通力安装公司',
                                '维保单位': '通力维保服务',
                                '年检日期': '2024-01-15'
                            }
                        },
                        {
                            id: 3,
                            code: 'SB-001',
                            name: '水泵-01',
                            type: '水泵设备',
                            location: 'B区-地下室-水泵房',
                            status: '维修中',
                            parkName: '智慧园区B区',
                            zoneName: 'B区地下室',
                            roomName: '水泵房',
                            params: {
                                '生产厂家': '格兰富水泵',
                                '设备型号': 'CR 95-2',
                                '额定功率': '15kW',
                                '安装单位': '格兰富安装团队',
                                '维保单位': '格兰富售后',
                                '最近维保': '2024-02-20'
                            }
                        }
                    ],
                    maintenanceRecords: [], // 维保记录数据
                    faultRecords: [], // 故障记录数据
                    manualList: [], // 产品说明书文件列表
                    repairManualList: [], // 维修手册文件列表
                    operationManualList: [], // 操作规程文件列表
                    configForm: {
                        systemType: '',
                        deviceName: '',
                        selectedSensors: []
                    },
                    sensorList: [
                        {
                            id: 1,
                            name: '温度传感器',
                            value: 25.6,
                            unit: '℃',
                            controllable: false
                        },
                        {
                            id: 2,
                            name: '湿度传感器',
                            value: 65,
                            unit: '%RH',
                            controllable: false
                        },
                        {
                            id: 3,
                            name: '控制器',
                            value: '-',
                            unit: '',
                            controllable: true,
                            status: true
                        }
                    ],
                    dialogVisible: false,
                    dialogTitle: '',
                    deviceForm: {
                        code: '',
                        name: '',
                        parkId: '',
                        zoneId: '',
                        roomId: '',
                        typeId: '',
                        params: {}
                    },
                    rules: {
                        code: [
                            { required: true, message: '请输入设备编号', trigger: 'blur' }
                        ],
                        name: [
                            { required: true, message: '请输入设备名称', trigger: 'blur' }
                        ],
                        parkId: [
                            { required: true, message: '请选择所属园区', trigger: 'change' }
                        ],
                        zoneId: [
                            { required: true, message: '请选择所属分区', trigger: 'change' }
                        ],
                        roomId: [
                            { required: true, message: '请选择所属机房', trigger: 'change' }
                        ],
                        typeId: [
                            { required: true, message: '请选择设备类型', trigger: 'change' }
                        ]
                    },
                    parks: [], // 园区列表
                    zonesOptions: [], // 分区选项
                    roomsOptions: [], // 机房选项
                    deviceTypes: [], // 设备类型列表
                    currentTypeFields: [], // 当前设备类型的参数字段
                    detailDialogVisible: false,
                    currentDevice: null,
                    // 新增：可选的传感器列表
                    availableSensors: [
                        {
                            id: 1,
                            name: '温度传感器组',
                            type: '温度',
                            factors: [
                                { name: '室温', value: '25.6', unit: '℃' },
                                { name: '管温', value: '18.3', unit: '℃' }
                            ],
                            status: '正常',
                            controllable: false, // 不可控制
                            location: 'A区-1号机房'
                        },
                        {
                            id: 2,
                            name: '湿度传感器组',
                            type: '湿度',
                            factors: [
                                { name: '相对湿度', value: '65', unit: '%RH' },
                                { name: '绝对湿度', value: '15.2', unit: 'g/m³' }
                            ],
                            status: '正常',
                            controllable: false, // 不可控制
                            location: 'A区-1号机房'
                        },
                        {
                            id: 3,
                            name: '空调控制器组',
                            type: '控制器',
                            factors: [
                                { name: '运行状态', value: '运行中', unit: '' },
                                { name: '设定温度', value: '26', unit: '℃' }
                            ],
                            status: '正常',
                            controllable: true, // 可控制
                            controlStatus: true,
                            hasSetPoint: true, // 支持设定值
                            setPoint: 26,
                            setPointMin: 16,
                            setPointMax: 30,
                            setPointStep: 0.5,
                            setPointUnit: '℃',
                            canReset: true,
                            canCalibrate: true,
                            location: 'A区-1号机房'
                        }
                    ],
                    selectedSensorList: [], // 新增：当前选中的传感器详细数据
                    configDialogVisible: false, // 绑定组态对话框的显示状态
                    systemTypes: [  // 添加系统类型数据
                        { id: 1, name: '空调系统' },
                        { id: 2, name: '电梯系统' },
                        { id: 3, name: '给排水系统' }
                    ],
                    currentBindDevice: null, // 当前正在绑定的设备
                    configDevices: [], // 组态设备列表
                    sensorSearchForm: {
                        name: '',
                        type: '',
                        page: 1,
                        pageSize: 10
                    },
                    totalSensors: 0,
                    selectedSensors: [] // 选中的传感器列表
                }
            },
            methods: {
                handleSearch() {
                    // 实现搜索逻辑
                },
                resetSearch() {
                    this.searchForm = {
                        park: '',
                        zone: '',
                        room: '',
                        deviceType: ''
                    }
                },
                handleAdd() {
                    this.dialogTitle = '新增设备';
                    this.dialogVisible = true;
                },
                handleEdit(row) {
                    this.dialogTitle = '编辑设备';
                    this.deviceForm = {...row};
                    this.dialogVisible = true;
                },
                handleDelete(row) {
                    // 实现删除逻辑
                },
                viewDetails(row) {
                    this.currentDevice = row;
                    this.detailDialogVisible = true;
                },
                handlePreview(file) {
                    // 实现文件预览逻辑
                },
                handleRemove(file, fileList) {
                    // 实现文件删除逻辑
                },
                handleParkSelect(parkId) {
                    this.deviceForm.zoneId = '';
                    this.deviceForm.roomId = '';
                    this.zonesOptions = []; // 根据园区ID获取分区列表
                    this.roomsOptions = [];
                },
                handleZoneSelect(zoneId) {
                    this.deviceForm.roomId = '';
                    this.roomsOptions = []; // 根据分区ID获取机房列表
                },
                handleDeviceTypeSelect(typeId) {
                    const selectedType = this.deviceTypes.find(t => t.id === typeId);
                    if (selectedType) {
                        this.currentTypeFields = selectedType.infoFields;
                        // 重置参数对象
                        this.deviceForm.params = {};
                        // 初始化参数对象的属性
                        this.currentTypeFields.forEach(field => {
                            this.deviceForm.params[field.name] = '';
                        });
                    }
                },
                saveDevice(formName) {
                    this.$refs[formName].validate((valid) => {
                        if (valid) {
                            // 验证通过，进行保存操作
                            console.log('设备信息：', this.deviceForm);
                            this.$message.success('保存成功');
                            this.dialogVisible = false;
                        } else {
                            this.$message.warning('请填写完整信息');
                            return false;
                        }
                    });
                },
                resetForm() {
                    this.deviceForm = {
                        code: '',
                        name: '',
                        parkId: '',
                        zoneId: '',
                        roomId: '',
                        typeId: '',
                        params: {}
                    };
                    this.currentTypeFields = [];
                },
                initData() {
                    // 获取园区列表
                    this.parks = [
                        { id: 1, name: '智慧园区A区' },
                        { id: 2, name: '智慧园区B区' }
                    ];
                    // 获取设备类型列表
                    this.deviceTypes = [
                        {
                            id: 1,
                            name: '空调设备',
                            infoFields: [
                                { name: '生产厂家', type: 'text', required: true },
                                { name: '设备型号', type: 'text', required: true },
                                { name: '生产日期', type: 'date', required: true },
                                { name: '安装厂家', type: 'text', required: true }
                            ]
                        },
                        // ... 其他设备类型
                    ];
                },
                handleCommand(command, row) {
                    // 保存当前设备信息到 localStorage，以便在其他标签页使用
                    localStorage.setItem('currentDeviceId', row.id);
                    
                    // 切换到对应的标签页
                    this.activeTab = command;
                    
                    // 根据不同的命令执行相应的操作
                    switch(command) {
                        case 'maintenance':
                            // 加载该设备的维保记录
                            this.loadMaintenanceRecords(row.id);
                            break;
                        case 'fault':
                            // 加载该设备的故障记录
                            this.loadFaultRecords(row.id);
                            break;
                        case 'document':
                            // 加载该设备的文档列表
                            this.loadDeviceDocuments(row.id);
                            break;
                        case 'config':
                            // 加载该设备的组态数据
                            this.loadConfigData(row.id);
                            break;
                    }
                },
                
                // 加载维保记录
                loadMaintenanceRecords(deviceId) {
                    // 这里添加加载维保记录的逻辑
                    this.maintenanceRecords = [
                        {
                            date: '2024-02-20至2024-12-01',
                            type: '定期保养',
                            person: '张工',
                            content: '空调系统清洗、检查',
                            result: '已完成'
                        },
                        // ... 其他维保记录
                    ];
                },
                
                // 加载故障记录
                loadFaultRecords(deviceId) {
                    // 这里添加加载故障记录的逻辑
                    this.faultRecords = [
                        {
                            date: '2024-01-15',
                            info: '中央空调-01',
                            name: '张工',
                            description: '温度异常',
                            status: '已处理',
                            fixmethod: '更换温度传感器'
                        },
                        // ... 其他故障记录
                    ];
                },
                
                // 加载设备文档
                loadDeviceDocuments(deviceId) {
                    // 这里添加加载文档的逻辑
                    this.manualList = [
                        {
                            name: '设备说明书.pdf',
                            url: 'path/to/manual.pdf'
                        }
                        // ... 其他文档
                    ];
                },
                
                // 加载组态数据
                loadConfigData(deviceId) {
                    // 模拟加载数据
                    this.configForm = {
                        systemType: '空调系统',
                        deviceName: '中央空调-01',
                        selectedSensors: [1, 2] // 默认选中温度和湿度传感器
                    };
                    // 触发传感器选择事件
                    this.handleSensorSelect(this.configForm.selectedSensors);
                },
                // 处理传感器选择
                handleSensorSelect(selectedIds) {
                    this.selectedSensorList = this.availableSensors.filter(
                        sensor => selectedIds.includes(sensor.id)
                    );
                },
                // 处理传感器控制
                handleSensorControl(sensor) {
                    this.$message.success(`${sensor.name}已${sensor.controlStatus ? '开启' : '关闭'}`);
                    // 这里可以添加实际的控制逻辑
                },
                // 处理绑定组态按钮点击
                handleBindConfig(row) {
                    this.currentBindDevice = row;
                    this.configDialogVisible = true;
                    // 如果该设备已有组态配置，则加载现有配置
                    this.loadConfigData(row.id);
                },
                // 保存组态绑定
                saveConfigBinding() {
                    if (!this.configForm.systemType) {
                        this.$message.warning('请选择组态系统类型');
                        return;
                    }
                    if (!this.configForm.deviceName) {
                        this.$message.warning('请输入组态设备名称');
                        return;
                    }
                    if (this.configForm.selectedSensors.length === 0) {
                        this.$message.warning('请至少选择一个传感器');
                        return;
                    }

                    // 这里添加保存逻辑
                    console.log('保存组态绑定信息：', {
                        deviceId: this.currentBindDevice.id,
                        config: this.configForm
                    });

                    this.$message.success('绑定成功');
                    this.configDialogVisible = false;
                },
                getSystemTypeName(typeId) {
                    const type = this.systemTypes.find(t => t.id === typeId);
                    return type ? type.name : '';
                },
                refreshSensorData() {
                    // 模拟刷新数据
                    this.$message.success('数据已更新');
                    // 这里可以添加实际的数据刷新逻辑
                },
                // 处理组态系统类型变化
                handleSystemTypeChange(typeId) {
                    this.configForm.deviceName = '';
                    // 根据系统类型加载对应的设备列表
                    this.loadConfigDevices(typeId);
                },
                // 加载组态设备列表
                loadConfigDevices(typeId) {
                    // 模拟加载数据
                    this.configDevices = [
                        { id: 1, name: '中央空调-01', code: 'AC001' },
                        { id: 2, name: '中央空调-02', code: 'AC002' },
                        { id: 3, name: '冷水机组-01', code: 'CH001' }
                    ];
                },
                // 搜索传感器
                searchSensors() {
                    // 这里添加传感器搜索逻辑
                    console.log('搜索条件：', this.sensorSearchForm);
                },
                // 重置传感器搜索
                resetSensorSearch() {
                    this.sensorSearchForm = {
                        name: '',
                        type: '',
                        page: 1,
                        pageSize: 10
                    };
                    this.searchSensors();
                },
                // 处理传感器选择变化
                handleSensorSelectionChange(selection) {
                    this.selectedSensors = selection;
                    this.configForm.selectedSensors = selection.map(item => item.id);
                },
                // 处理分页大小变化
                handleSizeChange(val) {
                    this.sensorSearchForm.pageSize = val;
                    this.searchSensors();
                },
                // 处理页码变化
                handleCurrentChange(val) {
                    this.sensorSearchForm.page = val;
                    this.searchSensors();
                },
                // 处理设定值变化
                handleSetPointChange(sensor) {
                    this.$message.success(`${sensor.name}设定值已更新为: ${sensor.setPoint}${sensor.setPointUnit}`);
                    // 这里添加实际的设定值更新逻辑
                },
                // 处理传感器操作
                handleSensorOperation(sensor, operation) {
                    switch(operation) {
                        case 'reset':
                            this.$confirm('确定要重置该传感器吗?', '提示', {
                                confirmButtonText: '确定',
                                cancelButtonText: '取消',
                                type: 'warning'
                            }).then(() => {
                                this.$message.success(`${sensor.name}已重置`);
                                // 这里添加实际的重置逻辑
                            }).catch(() => {});
                            break;
                        case 'calibrate':
                            this.$confirm('确定要校准该传感器吗?', '提示', {
                                confirmButtonText: '确定',
                                cancelButtonText: '取消',
                                type: 'warning'
                            }).then(() => {
                                this.$message.success(`${sensor.name}校准已启动`);
                                // 这里添加实际的校准逻辑
                            }).catch(() => {});
                            break;
                    }
                }
            },
            created() {
                this.initData();
            }
        })
    </script>
</body>
</html> 